<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view>
			<u-navbar :autoBack="true" bgColor="#252928" safeAreaInsetTop placeholder="true">
				<view style="display: flex;" class="u-nav-slot" slot="left">
					<u-icon color="#ffffff" name="arrow-left" size="19"></u-icon>
					<view style="font-size: 36rpx;margin-left: 20rpx;">藏品记录</view>

				</view>
			</u-navbar>
		</view>
		<view class="collection">
			<template v-if="show">
				<view class="" style="margin-top: 200rpx;">
					<u-empty :width="100" :show="show" style="padding-top: 280rpx;" textColor="#7e807f" mode="data"
						icon="https://img.xieling.top/mini4.png" text="记录为空" iconColor="#ffffff">
					</u-empty>
				</view>
			</template>
			
			
			<view class="collection-c">
				<view class="collection-item" v-for="(item,index ) in data">
					<view class="collection-t">
						<view class="" style="display: flex;">
							<view style="margin-right: 20rpx;">
								<image :src="item.img" mode=""></image>
							</view>
							<view>
								<view class="" style="font-size: 38rpx;">
									{{item.name}}
								</view>
								<view class="" style="color: #9f9f9f;;">
									{{item.bh}}
								</view>
							</view>
						</view>
						
						
						<view style="color: #00ff00;">
							交易成功
						</view>
					</view>
					<view class="pa" style="margin-top: 20rpx;">
						<view>交易金额</view>
						<view>{{item.price}}元</view>
					</view>
					<view class="pa"style="margin: 20rpx 0rpx;">
						<view>交易时间</view>
						<view>{{item.time}}</view>
					</view>
					<view class="pa">
						<view>记录单号</view>
						<view>{{item.odd}}</view>
					</view>


				</view>
			</view>
		</view>
		<u-loadmore :status="status" height="100rpx" loadmoreText="-更多内容敬请期待-"/>
		
		<!-- <view class="">
			xxx
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 0,
				data: [{
						name: '唐·十二辰·鼠首俑',
						bh: 'AC154511515#15s1das100',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					},
					{
						name: '唐·十二辰·鼠首俑',
						bh: 'AC154511515#15s1das100',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					},
					{
						name: '唐·十二辰·鼠首俑',
						bh: 'AC154511515#15s1das100',
						price: '19.99',
						time: '2020-01-28 12:00:38',
						odd: '22052525251850548',
						img: 'https://img.xieling.top/14.jpg'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.collection-c{
	width: 95%;
	margin:40rpx auto 0rpx;
	box-sizing: border-box;
	
}
.collection-item{
	margin-top: 40rpx;
	background-color: #3c3f3d;
	padding: 20rpx;
	border-radius: 25rpx;
	image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 25rpx;
	}
	
}
.collection-t{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #797979;
}
.pa{
	display: flex;justify-content: space-between;
}
</style>
